<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import NavigationBar from "@/components/NavigationBar.vue";
const router = useRouter();
const route = useRoute();
// let isShow = ref(true)
// // 监听路由是否完成初始导航
// router.isReady().then(() => {
//   isShow.value = false // 初始导航完成后关闭标记
// })
import { useNavigationBarStore } from "@/stores/navigationBar";
import { storeToRefs } from "pinia";
const navigationBarStore = useNavigationBarStore();
//这里获取isClick时必须用storeToRefs包裹一层否则会丢失响应式
const { isClick } = storeToRefs(navigationBarStore);

const setIsClick = navigationBarStore.setIsClick;

//控制点击时候的选中效果从外部跳转时传入一个id

const url = [
  "/detailPages/scientificAchievements",
  "/detailPages/scientist",
  "/detailPages/scientificWorks",
  "/detailPages/excellentCulture",
];

import bgImg2 from "@/assets/bgImg/bgImg2.jpg";
import bgImg4 from "@/assets/bgImg/bgImg4.jpg";
import bgImg3 from "@/assets/bgImg/bgImg3.jpg";
import bgImg1 from "@/assets/bgImg/bgImg1.jpg";
// import { tr } from "element-plus/es/locale";

//选项卡数据
//0 20%/100% 前面是位置 后面是缩放比 第一个数是x轴第二个是y轴
const bgImgList = [
  {
    title: "中国古代科学成就",
    subtitle: "科学成就",
    img: `linear-gradient(50deg, rgba(255,255,255,0.8) 10%, rgba(0,0,0,0)), url(${bgImg2}) no-repeat 0 20%/100%`,
  },
  {
    title: "中国古代科学家",
    subtitle: "科学家",
    img: `linear-gradient(50deg, rgba(255,255,255,0.8) 10%, rgba(0,0,0,0)),url(${bgImg4}) no-repeat 10% 34%/100%`,
  },
  {
    title: "中国古代科学著作",
    subtitle: "科学著作",
    img: `linear-gradient(50deg, rgba(255,255,255,0.8) 10%, rgba(0,0,0,0)),url(${bgImg3}) no-repeat 50% 20%/120%`,
  },
  {
    title: "中国古代优秀文化",
    subtitle: "优秀文化",
    img: `linear-gradient(50deg, rgba(255,255,255,0.8) 10%, rgba(0,0,0,0)),url(${bgImg1}) no-repeat 0 100%/100%`,
  },
];

const boxOnClick = (index) => {
  router.push(url[index]);
  //控制点击时候的选中效果，点击时取字符串最后一位字符赋值给id达到选中的效果
  setIsClick(index + 2);
  console.log("boxOnClick", url[index]);

  console.log("boxOnClick", index);
};

//动画加载
const isShowAnimation = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowAnimation.value = true;
  }, 100);
});
//处理进入页面时子页面闪白
const isShow = ref(1600);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShow.value = 0;
  }, 100);
});
</script>

<template>
  <!-- 详情页 -->
  <div class="detailPages">
    <!-- 导航栏 -->
    <Transition
      name="custom-classes"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <NavigationBar
        v-if="isShowAnimation"
        @clickBar="boxOnClick"
      ></NavigationBar>
    </Transition>
    <!-- 主体部分 -->
    <div class="main">
      <!-- 左边 -->
      <div class="left">
        <!-- 左边的上面文字 -->
        <div class="top">
          <!-- 中国历史科学家 -->
          <!-- <h3>
            <DynamicCharacters
              :speed="10"
              :animate="'animate__bounceInDown'"
              :style="'font-size: 30px'"
              :text="'中国历史科学家'"
            ></DynamicCharacters>
          </h3> -->
          <div class="text"></div>
        </div>
        <!-- 左边的下面4个选项 -->
        <div class="bottom">
          <!-- 每一个选项 -->
          <TransitionGroup
            enter-active-class="my-custom-enter "
            leave-active-class="animate__animated animate__bounceOutRight"
          >
            <template v-if="isShowAnimation">
              <div
                class="box"
                v-for="(item, index) in bgImgList"
                :key="item.img"
                @click="boxOnClick(index)"
                :class="{
                  activeCss: index == isClick - 2,
                  box1: index === 0,
                  box2: index === 1,
                  box3: index === 2,
                  box4: index === 3,
                  box5: index === 4,
                }"
                :style="{
                  background: item.img,
                }"
              >
                <!-- 每个选项里的左边数字 -->
                <div class="boxLeft">{{ index + 1 }}</div>
                <!-- 每个选项里右边的文字 -->
                <div class="boxRight">
                  <h4>{{ item.title }}</h4>
                  <div class="boxText">{{ item.subtitle }}</div>
                </div>
              </div>
            </template>
          </TransitionGroup>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right" :style="{ minWidth: isShow + 'px' }">
        <!-- <RouterView /> -->

        <router-view v-slot="{ Component }">
          <transition name="fade">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 全局动画定义 */
//其它4个的入场动画
@keyframes mySkewIn {
  from {
    opacity: 0;
    transform: translateX(-600px) skewX(-5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(-5deg);
  }
}
//第一个的入场动画因为第一个是放大一点的
@keyframes mySkewIn1 {
  from {
    opacity: 0;
    transform: translateX(-600px) skewX(-5deg) scale(1.1);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(-5deg) scale(1.1);
  }
}

.bottom .box1 {
  animation: mySkewIn1 0.8s;
}
.bottom .box2 {
  animation: mySkewIn 0.7s;
}
.bottom .box3 {
  animation: mySkewIn 0.6s;
}
.bottom .box4 {
  animation: mySkewIn 0.5s;
}
.bottom .box5 {
  animation: mySkewIn 0.4s;
}
.detailPages {
  /* 覆盖 Animate.css 动画的 transform */

  position: relative;
  //全屏渐变
  background: url("/src/assets/homeImg/home.png") no-repeat center/cover;
  overflow: hidden;
  height: 100vh;
  .main {
    display: flex;
    height: 100vh;
    .left {
      //color: #fff;
      width: 400px;
      height: 100vh;
      // background: pink;
      padding: 80px 30px;
      box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.06);
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      .top {
        // h3 {
        //   font-size: 30px;
        //   font-style: italic;
        //   // background: #ae4c4c;
        // }
        .text {
          height: 50px;
          margin: 4px 0 16px;
          color: #eee;
        }
      }
      .bottom {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 80px;
        // 后期加渐变
        .box {
          display: flex;
          align-items: center;
          // background: rgb(232, 247, 232);
          height: 120px;
          border-radius: 6px;
          transform: skewX(-5deg);
          padding: 20px;
          transition: all 0.1s linear;
          // background: url("../../assets/1.jpg") no-repeat 0 20%/100%;
          .boxLeft {
            font-size: 60px;
            font-weight: 600;
            margin-right: 8px;
          }
          .boxRight {
            h4 {
              font-weight: 400;
              font-size: 20px;
            }
            .boxText {
              font-size: 14px;
              margin-top: 6px;
            }
          }
        }
        .box:hover {
          cursor: pointer;
          transform: scale(1.1) skewX(-5deg);
        }
        .box:active {
          cursor: pointer;
          transform: scale(0.95) skewX(-5deg);
        }
        .box.activeCss {
          transform: scale(1.1) skewX(-5deg);
        }
      }
    }
    .right {
      position: relative;
      flex: 1;
      height: 100vh;
      margin-top: 60px;
      /* 下面我们会解释这些 class 是做什么的 */
      .fade-enter-active,
      .fade-leave-active {
        overflow: hidden;

        transition: transform 0.5s ease;
        position: absolute; /* 关键：让新旧页面层叠 */
        width: 100%;
      }

      .fade-enter-from {
        overflow: hidden;

        transform: translateY(100%);
      }
      .fade-leave-to {
        overflow: hidden;
        transform: translateY(-100%);
      }
    }
  }
}
</style>
